<script setup>
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet, doPost} from "@/util/request.js";
import {showMessage} from "@/util/message.js";
import {useRoute, useRouter} from "vue-router";
import {UploadFilled} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";

//刷新页面
const refresh=inject('refresh')
//路由对象
const route = useRoute()
const router = useRouter()
//线索列表对象
const clueList = ref([])
//分页对象
const pageInfo = ref({})
// 获取数据
const loadData = (current) => {
  //分页
  const params = {
    current: current,
    pageSize: 15
  }
  doGet('/api/clue/pageList', params).then(resp => {
    if (resp.data.code === 200) {
      // 赋值
      clueList.value = resp.data.data.list
      pageInfo.value.total = resp.data.data.total
      pageInfo.value.pageSize = resp.data.data.pageSize
    } else {
      showMessage('查询线索列表失败', resp.data.msg, 'error')
    }
  })
}
/*---------线索导入---------*/
const leadingClue = ref(false)
// 检查文件大小的函数
const beforeUpload = (file) => {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    showMessage('上传文件大小不能超过 2MB!', '', 'warning');
  }
  return isLt2M;
};
// 表单响应式对象
const uploadRef = ref({})
//提交表单参数
const submitForm = () => {
  uploadRef.value.submit()
}
//导入文件上传
const uploadForm = (options) => {
  console.log(options)
  // 创建一个新的FormData对象，用于构造键值对数据格式
  let formData = new FormData()
  // 向formData对象中添加文件数据
  formData.append('file', options.file)
  // 发送请求
  doPost(options.action, formData).then(resp => {
    if (resp.data.code === 200) {
      // 提示信息
      showMessage('导入成功','success')
      // 关闭弹窗
      leadingClue.value = false
      // 重新加载数据
      refresh()
    } else {
      showMessage('导入失败', 'error', resp.data.msg)
    }
  })
}
/*------------跳转-------------*/
const detail = (id) => {
  //跳转到详情页面
  router.push('/index/clue/detail/' + id)
}
const addClue = () => {
  //跳转到添加页面
  router.push('/index/clue/add')
}
/*------------跳转-------------*/
//批量删除
// 选中的线索id集合
let idArr = []
const handlerSelectChange = (newSelection) => {
  // 每次改变，清空idArr
  idArr = []
  // 获取选中记录的id
  newSelection.forEach(item=>{
    idArr.push(item.id)
  })
}

// 批量删除
const  delBatch= () => {
  if (idArr.length <= 0) {
    showMessage('请选择要删除的记录！','warning')
    return
  }

  // 确认删除
  ElMessageBox.confirm('确认删除选中的记录吗？').then(resp=>{
    // 确认删除
    doDelete('/api/clue/batch/'+idArr, {}).then(resp=>{
      if (resp.data.code === 200) {
        showMessage('删除成功！', 'success')
        // 刷新列表
        refresh()
      } else {
        showMessage('删除失败，原因：' + resp.data.msg)
      }
    })
  }).catch(()=>{})
}
onMounted(() => {
  //查询线索列表
  loadData(1)
})

</script>

<template>
  <el-button type="primary" @click="addClue">线索录入</el-button>
  <el-button type="primary" @click="leadingClue=true">线索导入</el-button>

  <el-tooltip effect="light" content="可单选" placement="right">
    <el-button type="danger" @click="delBatch">批量删除</el-button>
  </el-tooltip>


  <!--  @selection-change="handlerSelectChange"-->
  <el-table
      :data="clueList"
      :border="true"
      @selection-change="handlerSelectChange"
      style="width: 100%">
    <el-table-column type="selection" width="60" align="center"/>
    <el-table-column label="序号" type="index" width="80" align="center"/>
    <el-table-column label="负责人" width="110" property="ownerName" align="center"/>
    <el-table-column label="所属活动" width="165" property="activityName" align="center"/>
    <el-table-column label="姓名" width="110" align="center">
      <template #default="scope">
        <el-link type="primary" @click="detail(scope.row.id)">
          {{ scope.row.fullName }}
        </el-link>
      </template>
    </el-table-column>
    <el-table-column label="称呼" property="appellationName" align="center"/>
    <el-table-column label="电话" property="phone" width="135" align="center"/>
    <el-table-column label="微信" property="weixin" width="135" align="center"/>
    <el-table-column label="是否贷款" property="needLoanName" width="105" align="center"/>
    <el-table-column label="意向状态" property="intentionStateTypeName" width="115" align="center"/>
    <el-table-column label="意向产品" property="intentionProductName" width="140" align="center"/>
    <el-table-column label="线索状态" property="intentionStateName" width="105" align="center">
      <template #default="scope">
        <span v-if="scope.row.intentionStateName === '已转客户'" class="trueColor">
          {{ scope.row.intentionStateName }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="线索来源" property="sourceTypeName" width="115" align="center"/>
    <el-table-column label="下次联系时间" property="nextContactTime" width="195" align="center"/>
    <!--    <el-table-column label="操作" align="center">
          &lt;!&ndash;编辑&详情&删除按钮&ndash;&gt;
    &lt;!&ndash;      <template #default="scope">
            <el-button type="success" size="small" @click="detail(scope.row.id)">详情</el-button>
            <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delClue(scope.row.id)">删除</el-button>
          </template>&ndash;&gt;
        </el-table-column>-->
  </el-table>
  <!--分页-->
  <el-pagination
      layout="prev, pager, next, jumper"
      :background="true"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      @change="loadData"/>
  <!-- 导入弹窗 -->
  <el-dialog v-model="leadingClue"
             :align-center="true"
             :center="true"
             title="线索导入"
             width="800">
    <el-upload
        ref="uploadRef"
        drag
        accept=".xls, .xlsx"
        action="/api/clue/importExcel"
        :http-request="uploadForm"
        :auto-upload="false"
        multiple
        method="post"
        class="upload-demo"
        :before-upload="beforeUpload">
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        将文件拖放到此处或 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          小于2MB的Excel文件
        </div>
      </template>
    </el-upload>
    <div style="margin-left: 600px">
      <el-button type="info" @click="leadingClue = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">导 入</el-button>
    </div>
  </el-dialog>

</template>

<style scoped>
.trueColor {
  color: limegreen;
}

.el-table {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>